<template>
    <v-card>
        <v-card-title>
            <v-text-field
                    v-model="search"
                    prepend-icon="search"
                    label="搜索歌手"
                    single-line
                    hide-details
            ></v-text-field>
            <v-spacer></v-spacer>
            <v-flex xs2>
                <v-btn round color="primary" dark @click="addSinger">
                    新增歌手
                </v-btn>
            </v-flex>
        </v-card-title>
        <v-data-table
                :headers="headers"
                :items="singers"
                :search="search"
                :pagination.sync="pagination"
                :total-items="totalSingers"
                :loading="loading"
                class="elevation-1"
        >
            <template v-slot:items="props">
                <td>{{ props.item.id }}</td>
                <td class="text-xs-center">
                    <div class="img">
                        <v-img
                                width="80px"
                                :src="props.item.avator"
                                aspect-ratio="1"
                                class="grey lighten-2"
                        >
                            <template v-slot:placeholder>
                                <v-layout
                                        fill-height
                                        align-center
                                        justify-center
                                        ma-0
                                >
                                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                                </v-layout>
                            </template>
                        </v-img>
                    </div>
                </td>
                <td class="text-xs-center hoveTitle" >{{ props.item.name }}</td>
                <td class="text-xs-center">{{ props.item.sex==1?"男":"女" }}</td>
                <td class="text-xs-center">{{ props.item.birthday }}</td>
                <td class="text-xs-center">{{ props.item.location }}</td>
                <td class="text-xs-center"><span class="tb_label" @click.prevent="showintroduction(props.item.introduction)">查看</span></td>
                <td class="text-xs-center">
                    <v-tooltip left>
                        <v-btn slot="activator" icon @click="editSinger(props.item)">
                            <i class="el-icon-edit"/>
                        </v-btn>
                        <span> 修改歌手</span>
                    </v-tooltip>
                    <v-tooltip left>
                        <v-btn icon slot="activator" @click="deleteSinger( props.item.id)">
                            <i class="el-icon-delete"/>
                        </v-btn>
                        <span> 删除歌手</span>
                    </v-tooltip>
                </td>
            </template>
            <template v-slot:no-results>
                <v-alert :value="true" color="error" icon="warning">
                    Your search for "{{ search }}" found no results.
                </v-alert>
            </template>
        </v-data-table>
        <!--弹出的对话框-->
        <v-dialog max-width="500" v-model="show" persistent scrollable v-if="isIntroduce">
            <v-card>
                <!--对话框的标题-->
                <v-toolbar dense dark color="primary">
                    <v-toolbar-title>歌手简介</v-toolbar-title>
                    <v-spacer/>
                    <!--关闭窗口的按钮-->
                    <v-btn icon @click="closeWindow">
                        <v-icon>close</v-icon>
                    </v-btn>
                </v-toolbar>
                <v-card-text class="px-3" style="height: 400px">
                <v-editor v-model="introduction"/>
                </v-card-text>
            </v-card>
        </v-dialog>
        <v-dialog max-width="500" v-model="show" persistent scrollable v-else>
            <v-card>
                <!--对话框的标题-->
                <v-toolbar dense dark color="primary">
                    <v-toolbar-title>{{isEdit ? '修改' : '添加'}}歌手</v-toolbar-title>
                    <v-spacer/>
                    <!--关闭窗口的按钮-->
                    <v-btn icon @click="closeWindow">
                        <v-icon>close</v-icon>
                    </v-btn>
                </v-toolbar>
                <!--对话框的内容，表单-->
                <v-card-text class="px-3" style="height: 600px">
                    <singer-form :oldSinger="oldSinger" @close="closeWindow" :is-edit="isEdit" ref="singerForm"/>
                </v-card-text>
            </v-card>
        </v-dialog>
    </v-card>
</template>

<script>
import SingerForm from '../singer/SingerForm'

export default {
    data () {
        return {
            search: '',
            pagination: {
                descending: false,
                page: 1,
                rowsPerPage: 5, // -1 for All",
                sortBy: "",
                totalItems: []
            },
            isEdit: false,  //是否是修改
            isIntroduce: false,
            introduction:'',
            headers: [
                {text: 'id', align: 'left', sortable: false, value: 'id'},
                { text: '图片', value: 'image' ,align: 'center'},
                { text: '名字', value: 'name',align: 'center' },
                { text: '性别', value: 'sex' ,align: 'center'},
                { text: '出生日期', value: 'birthday' ,align: 'center'},
                { text: '地区', value: 'location' ,align: 'center'},
                { text: '简介', value: 'introduce' ,align: 'center'},
                { text: '操作', align: 'center' ,align: 'center'}
            ],
            singers: [],
            totalSingers: 0,
            show: false,
            loading: true,
            oldSinger: {}
        }
    },
    methods: {
        showintroduction(i) {
            this.show = true
            this.isIntroduce = true
            this.introduction = i
        },
        getDataFromServer(){
            this.$http.get("/singer/page",{
                params: {
                    key: this.search,
                    page: this.pagination.page,
                    rows: this.pagination.rowsPerPage,
                    sortBy: this.pagination.sortBy? this.pagination.sortBy :"",
                    desc: this.pagination.descending? this.pagination.descending:"true"
                }
            }).then(resp =>  {
                console.log(resp.data)
                this.singers = resp.data.items;
                this.totalSingers = resp.data.total;
                this.loading = false;
            }).catch(()=>{
                this.singers = [];
                this.totalSingers = 0;
                this.loading = false;
                this.$router.push("/403")
            })
        },
        closeWindow() {
            // 重新加载数据
            this.getDataFromServer();
            // 关闭窗口
            this.show = false;
        },
        addSinger() {
            this.isEdit = false
            this.isIntroduce = false
            this.show = true
            this.oldSinger = {avator: ''}
        },
        editSinger(oldSinger) {
            this.isEdit = true
            this.show = true
            this.isIntroduce = false
            console.log(oldSinger )
            this.oldSinger = oldSinger
        },
        //删除
        deleteSinger(id) {
            this.$message.confirm("你确定删除该歌手嘛").then(()=>{
                this.$http.get("/singer/delete?id="+id)
                    .then(()=>{
                        this.$message.success("删除成功")
                        this.getDataFromServer();
                    })
                    .catch(()=>{
                        this.$message.error("删除失败")
                    })
            })
        }
    },
    watch: {
        pagination: {
            deep: true,
            handler() {
                this.getDataFromServer();
            }
        }
    },
    mounted() {
        this.getDataFromServer();
    },
    components: {
        SingerForm
    }
}
</script>
<style scoped>
    .hoveTitle {
        　　text-align: left;
        　　width: 140px;
        　　overflow: hidden;
        　　text-overflow: ellipsis;
        　　white-space: nowrap;
    }
    .img {
        height: 100px;
        margin: auto;
        padding-top: 10px;
        padding-left: 40px;
    }
</style>